<template>
  <div class="car">
    <van-popup :round='true' v-model="show">
      <div class="del">
        <h3>确定删除此商品么?</h3>
        <van-button round @click="show = false" type="info">取消</van-button>
        <van-button round @click="isdel" type="danger">确定</van-button>
      </div>
    </van-popup>
    <!-- 顶部导航栏 -->
    <van-sticky :offset-top="0">
      <div class="name">购物车</div>
    </van-sticky>
    <!-- 暂无商品时显示 -->
     <van-empty v-if="imageshow" image="error" description="购物车内暂无商品" />
    <div class="goods">
      <van-swipe-cell v-for="item in datalist" :key="item.id">
        <input type="checkbox" v-model="item.ischeck" />
        <van-card
          :num="item.number"
          :price="item.retail_price"
          :title="item.goods_name"
          class="goods-card"
          :thumb="item.list_pic_url"
        />
        <template #right>
          <van-button
            @click="del(item.id)"
            square
            text="删除"
            type="danger"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </div>

    <!-- 结算 -->
    <div class="bottom">
      <div class="left">
        <input v-model="all" type="checkbox" />
        <p class="all">全选</p>
      </div>
      <div class="right">
        <p>¥ {{ total }}</p>
        <div @click="toorder(total)" class="btn">下单</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { addCart, cartList, deleteAction, submitAction } from "@/api/car/index";
export default {
  components: {},

  data() {
    return {
      datalist: [],
      radio: "",
      show: false,
      delid: "",
    };
  },

  created() {
    localStorage.setItem("goodsID", this.$route.params.id);
    cartList({
      openId: localStorage.getItem("openId"),
    }).then((res) => {
      console.log(res);
      var arr = res.data;
      for (var i = 0; i < res.data.length; i++) {
        arr[i].ischeck = false;
      }
      localStorage.setItem("carlist", JSON.stringify(arr));
      this.datalist = JSON.parse(localStorage.getItem("carlist"));
    });
  },

  mounted() {},

  methods: {
    // 到下单页面
    toorder(money) {
      if (money == 0) {
        Toast({
          message: "请选择商品",
          icon: "close",
        });
      } else {
        console.log(this.datalist);
        var arr = [];
        this.datalist.forEach((el) => {
          if (el.ischeck) {
            arr.push(el);
          }
        });
        console.log(arr);
        this.$router.push({
          name: "order",
          params: {
            data: arr,
            price: money,
          },
        });
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    isdel() {
      var index = this.datalist.findIndex((el) => el.id == this.delid);
      this.datalist.splice(index, 1);
      console.log(this.datalist);
      localStorage.setItem("carlist", JSON.stringify(this.datalist));
      deleteAction({
        id: this.delid,
      }).then((res) => {
        console.log(res);
      });
      this.show = false;
    },
    // 删除商品
    del(goodsid) {
      this.show = true;
      this.delid = goodsid;
      console.log(goodsid);
    },
  },

  computed: {
    imageshow(){
      if(this.datalist.length==0){
        return true
      }else{
        return false
      }
    },
    all: {
      get() {
        return this.datalist.every((el) => el.ischeck);
      },
      set(val) {
        return this.datalist.forEach((el) => (el.ischeck = val));
      },
    },
    total() {
      return this.datalist.reduce(function (pre, nex) {
        if (nex.ischeck) {
          return (pre = pre + nex.number * nex.retail_price);
        } else {
          return pre;
        }
      }, 0);
    },
  },

  watch: {},
};
</script>

<style scoped lang='less'>
.goods {
  margin-bottom: 110px;
  .delete-button {
    height: 104px;
  }
  .van-swipe-cell {
    margin-bottom: 2px;
    border-bottom: 1px solid #f4f4f4;
  }
  .van-swipe-cell__wrapper {
    position: relative;
    width: 375px;
    height: 104px;
    input {
      position: absolute;
      z-index: 999;
      left: 10px;
      top: 40px;
      width: 20px;
      height: 20px;
      display: block;
      border-radius: 10px;
      outline-color: red;
    }
    input:focus {
      color: #ed1941;
    }
    .goods-card {
      margin-top: 0;
      margin-bottom: 8px;
      padding-left: 40px;
    }

    .van-card__content {
      text-align: left;
      .van-card__title {
        width: 150px;
        margin-top: 25px;
      }
      .van-card__bottom {
        margin-bottom: 15px;
      }
      .van-card__num {
        margin-top: -15px;
        font-size: 14px;
        color: #333;
      }
    }
  }
}

// 底部结算
.car {
  position: relative;
  .bottom {
    height: 50px;
    width: 375px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 50px;
    background-color: #fff;
    .left {
      width: 60px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      margin-left: 20px;
      input {
        width: 20px;
        height: 20px;
        margin-top: 15px;
        outline-color: red;
      }
      p {
        height: 50px;
        font-size: 14px;
        line-height: 50px;
      }
    }
    .right {
      width: 170px;
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      p {
        width: 70px;
        height: 50px;
        text-align: left;
        line-height: 50px;
        color: red;
      }
      .btn {
        width: 100px;
        height: 50px;
        line-height: 50px;
        background-color: red;
        color: white;
        font-size: 16px;
      }
    }
  }
}
.name {
  width: 375px;
  height: 46px;
  background-color: #fff;
  font-size: 16px;
  line-height: 46px;
  text-align: left;
  text-indent: 20px;
}
// 删除页面
.del {
  width: 300px;
  height: 130px;
  border-radius: 20px;
  h3 {
    width: 300px;
    height: 50px;
    font-size: 18px;
    color: rgb(0, 0, 0);
    line-height: 50px;
    margin-top: 20px;
  }
  .van-button {
    width: 80px;
    font-size: 16px;
    height: 40px;
    margin: 10px;
  }
}
.van-empty{
  width: 375px;
  height: 520px;
  background-color: #fff;
}
</style>